<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色权限列表</title>
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/page.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/popCss.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/role/css/role.css}"  media="all"/>
    <style type="text/css">
        /*取消选中效果*/
		div{
	    -moz-user-select:none;/*火狐*/
	    -webkit-user-select:none;/*webkit浏览器*/
	    -ms-user-select:none;/*IE10*/
	    -khtml-user-select:none;/*早期浏览器*/
	      user-select:none;
		}
    </style>
</head>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<body>
<div class="bgWhite box-shadows1 border-radius4 scroll-box">
	<div class="scroll-box-con border-radius4 bgWhite">
		<div class="mb20px lh32px overflow add-btn-input">
			<p class="left cursor">
				<span onclick="addRole()" class="white border-radius4 bgGreen inline-block pl15px pr15px"><img th:src="@{/static/img/button_add.png}" class="mr5px" style="vertical-align: -1px;cursor: pointer;">新建</span>
			</p>
<!--			<p class="right">共有<span class="red">120</span>条数据</p>-->
		</div>
		<div class="border1px border-radius4 relative mb40px">
			<table class="layui-hide" id="test" lay-filter="test"></table>
		</div>
	</div>
</div>

<script type="text/javascript" th:src="@{/static/js/jquery-2.1.3.min.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/layuiCon.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/date.js}" charset="utf-8"></script>
<script>

    $(function(){
    	//查询初始化
		tableGrenate();
    })

    /**
     * table query
     */
    function tableGrenate(){
		layui.use(['table'], function() {
            var element = layui.element;
            table = layui.table;
            //表格
            table.render({
                elem: '#test'
                ,url: '../sysRole/getRoleList'
                ,page: true //开启分页
                ,limit: 10
                ,limits: [5,10,20]
                ,cols: [
                    [ //表头
						{field:'name', title:'角色', width:180,},
                        {field:'role_desc', title:'角色描述', width:360,},
                        {field:'count', title:'授权用户数', width:180,},
                        {field:'preinstall', title:'系统预设', width:200,
							templet: function(res){
								var preinstall = res.preinstall;
								var html = preinstall==1?html = "<img src='"+basePath+"/static/role/img/icon_xtys.png'>":"";
								return html;
							}},
                        {field: 'operation',title: '操作',style: 'color:#1C9399',
                            templet: function(v){
								var html='<div style="margin-left: 12px;">';
                                html+='<span class=\'queryRole\' style="cursor: pointer;"  data-id=\''+v.id+'\'>查看</span>&nbsp;&nbsp;&nbsp;&nbsp;';
                                if(v.preinstall==0){
									html +='<span class=\'editRole\' style="cursor: pointer;" data-id=\''+v.id+'\'>编辑&nbsp;&nbsp;&nbsp;&nbsp;</span>';
                                    html +="<span class=\'deleteRole\'  style=\"cursor: pointer;\" data-id='"+v.id+"'>删除&nbsp;&nbsp;&nbsp;&nbsp;</span>";
                                }
                                html+='</div>';
                                return html;
                            }
                        }
                    ]
                ]
                ,done: function(res, curr, count){
                    //查看按钮初始化
                    $("span.queryRole").unbind().on("click",function (e) {
						var id = $(this).data("id");
						var args=[];
						args.push(id);
						queryRole(id);
                    })
                    //编辑按钮初始化
                    $("span.editRole").unbind().on("click",function (e) {
						var id = $(this).data("id");
						var args=[];
						args.push(id);
						editRole(id);
                    })
                    //删除按钮初始化
                    $("span.deleteRole").unbind().on("click",function (e) {
                        var id = $(this).data("id");
                        var args=[];
                        args.push(id);
						deleteCon("",deleteRole, args, 1);
                    })
                }
            });
        });
    }

	/**
	 * 查询按钮点击
	 */
    // $("#queryBtn").unbind().click(function(){
	// 	tableGrenate();
    // })


	/**
	 * 删除角色
	 */
    function deleteRole(id) {
        $.ajax({
            url:basePath+"/sysRole/delete",
            type:"post",
            dataType:"json",
            data:{"roleNo":id},
            success:function (result) {
                if(result.code == 200){
					layerResult("删除成功",1);
                }else{
					layerResult(result.msg,2);
                }
            }
        })
    }

    /**
	 * 判断是否
	 */
    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }

	/**
	 * 跳转到添加角色
	 */
	function addRole(){
		window.location.href=basePath+"/sysRole/addPage";
	}

	/**
	 * layer msg
	 */
	function layerMsg(msg){
		var layer;
		layui.use(['layer'], function() {
			layer = layui.layer;
			layer.ready(function(){
				layer.msg(msg);
			});
		});
	}

	/**
	 * layer result
	 */
	function layerResult(msg,type){
		var layer;
		layui.use(['layer'], function() {
			layer = layui.layer;
			layer.ready(function(){
				layer.msg(msg, {icon: type, time:1500},function(){
					$(".layui-laypage-btn").click();
				});
			})
		});
	}

	/**
	 * 跳转到修改角色
	 */
	function editRole(roleNo){
		window.location.href=basePath+"/sysRole/editPage?roleNo="+roleNo;
	}

	/**
	 * 跳转到查看用户
	 */
	function queryRole(roleNo){
		window.location.href=basePath+"/sysRole/infoPage?roleNo="+roleNo;
	}



</script>
</body>
</html>
